<template>
  <div style="height: 100%">
    <el-row class="tac">
      <el-col :span="4">
        <el-menu
          :default-active="currentIndex"
          @select="selectMemu"
          class="el-menu-vertical-demo"
        >
          <el-menu-item index="0">
            <i class="el-icon-arrow-left"></i>
            <span slot="title">退出管理</span>
          </el-menu-item>
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">商品管理</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-document"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20" v-if="currentIndex == 1">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          @row-click="rowClick"
          style="width: 100%"
        >
          <el-table-column label="商品名" prop="gName"> </el-table-column>
          <el-table-column label="发售人" prop="uName"> </el-table-column>
          <el-table-column label="点击量" prop="gHits"> </el-table-column>
          <el-table-column label="价格" prop="gPrice"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click.stop="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="pageSize"
          :current-page="pageNumber"
          layout="prev, pager, next"
          @current-change="pageChange"
          :total="pageTotal"
        >
        </el-pagination>
      </el-col>
      <el-col :span="20" v-if="currentIndex == 2">
      <el-table
          v-loading="tableLoading"
          :data="tableData"
          @row-click="rowClick"
          style="width: 100%"
        >
          <el-table-column label="用户名" prop="uName"> </el-table-column>
          <el-table-column label="手机号" prop="uPhone"> </el-table-column>
          <el-table-column label="密码" prop="uPwd"> </el-table-column>
          <el-table-column label="学校" prop="uSchool"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click.stop="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="pageSize"
          :current-page="pageNumber"
          layout="prev, pager, next"
          @current-change="pageChange"
          :total="pageTotal"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      title="详细图片"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <img :src="currentImgUrl" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  created() {
    this.getData();
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      currentIndex: "1",
      currentImgUrl: "",
      search: "",
      tableLoading: false,
      pageTotal: 0, //总数
      pageNumber: 1, //当前页
      pageSize: 10, //每页数量
    };
  },
  methods: {
    getData() {
      this.tableLoading = true;
      if(this.currentIndex == 1){
        this.$axios.get("/api/goods/getAllGoods").then((res) => {
          this.pageTotal = res.data.data.length;
          this.$axios
            .get("/api/goods/getAllGoods1", {
              params: {
                pageNumber: this.pageNumber,
                pageSize: this.pageSize,
              },
            })
            .then((res) => {
              this.tableData = res.data.data;
              this.tableLoading = false;
           });
          });
      }else{
        this.$axios.get("/api/users/getAllUserMes",{
          params:{
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
          }
        }).then((res)=>{
            this.pageTotal = res.data.data.length;
            this.tableData = res.data.data;
            this.tableLoading = false;
        })
      }
    },
    selectMemu(index) {
      this.currentIndex = index;
      this.tableData = [];
      if(index==0){
        this.$router.push("/")
      }else{
        this.getData();
      }
    },
    rowClick(row) {
      this.currentImgUrl = ""; //解决图片切换问题
      this.currentImgUrl = row.gPic;
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      if(this.currentIndex==1){
      this.$confirm("您确定要删除嘛", "删除商品", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post("/api/goods/delGood", { gId: row.gId })
            .then((res) => {
              if (res.data.msg == "ok") {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.pageNumber = 1;
                this.getData();
              }
              this.reload();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      }else{
        this.$message({
          message: '暂不支持删除',
          type: 'warning'
        });
      }
    },
    pageChange(num) {
      this.pageNumber = num;
      this.getData();
    },
  },
};
</script>
<style lang="scss" scoped>
.tac {
  height: 100%;
  .el-col-4 {
    height: 100%;
    .el-menu {
      height: 100%;
    }
  }
}
.el-pagination {
  display: flex;
}
/deep/.el-dialog__body {
  display: flex;
  justify-content: center;
}
</style>